(function (fruit, ui) {
    ui.define('fruit.ui.CheckBox', {
        view:{
            tag:'label',
            props:{
                'class':'f-checkbox f-checkbox-{#type}'
                ,
                role:'checkbox',
                'aria-checked':'{#checked}'
            },
            content:[
                {
                    tag:'i',
                    props:{
                        'class':'f-checkbox-img',
                        tabindex:'0'
                    }
                },
                {
                    tag:'input',
                    props:{
                        type:'checkbox',
                        checked:'{#checked}'
                    }
                },
                {
                    tag:'span',
                    props:{
                        'class':'f-label',
                        role:'label'
                    },
                    content:'{#text}'
                }
            ]
        },
        properties:{
            checked:{
                value:false,
                observable:true
            },
            text:{
                value:'',
                observable:true
            },
            type:{
                value:'',
                observable:true
            }
        }
    });
})(fruit, fruit.ui);